<template>
  <vue-seamless-scroll class="main" :data="peopleList">
    <ul>
      <li class="move_box" v-for="item in peopleList" :key="item.id">
        <div>
          <img src="../assets/img/headport.jpg" alt="" />
          <div>
            <el-tag size="mini" style="margin: 6px 1px">用户：{{item.name}}</el-tag
            ><br />
            <el-tag size="mini" type="warning">{{item.date}}</el-tag>
          </div>
          <el-tag :type="item.type" style="margin:15px 0 0 20px;">{{item.message}}</el-tag>
        </div>
        <el-button :type="item.type" size="mini">查看详情</el-button>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
export default {
  data () {
    return {
      peopleList: [
        { id: '1', name: '王琦璋', date: '2022-05-18', message: '发起了在线问诊', type: 'danger' },
        { id: '2', name: '王琦璋', date: '2022-05-02', message: '预约了线下门诊', type: 'warning' },
        { id: '3', name: '王琦璋', date: '2022-05-08', message: '提交了打卡信息', type: 'primary' },
        { id: '4', name: '王琦璋', date: '2022-04-30', message: '发起了在线问诊', type: 'danger' },
        { id: '5', name: '王琦璋', date: '2022-03-18', message: '提交了打卡信息', type: 'primary' },
        { id: '6', name: '王琦璋', date: '2022-05-18', message: '预约了线下门诊', type: 'warning' },
        { id: '7', name: '王琦璋', date: '2022-05-18', message: '提交了打卡信息', type: 'primary' }
      ]
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.main .move_box {
  width: 100%;
  height: 70px;
  padding: 5px 10px;
  border: 1px solid lightsalmon;
  box-sizing: border-box;
  margin-top: 20px;
  position: relative;
  transition: 1s;
}
/* .main li:nth-child(1){
    animation: top 5s linear infinite ;
}
.main li:nth-child(2){
    animation: top 5s  linear infinite ;
}
.main li:nth-child(3){
    animation: top 5s  linear infinite ;
}
.main li:nth-child(4){
    animation: top 5s  linear infinite ;
}
.main li:nth-child(5){
    animation: top 5s  linear infinite ;
}
.main li:nth-child(6){
    animation: top 5s  linear infinite ;
}
.main li:nth-child(7){
    animation: top 5s  linear infinite ;
} */
.main li div {
  height: 100%;
  float: left;
}
.main li img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  border: 1px solid lightskyblue;
  box-sizing: border-box;
  float: left;
}
.move_box .el-button {
  float: right;
  margin-top: 16px;
}
@keyframes top{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-680px);
    }
}
</style>
